<template>
  <div class="common-container">
    <!-- 操作区域 -->
    <el-card class="operation-card">
      <div class="operation-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon> 新增数据源
        </el-button>
        <el-input
          v-model="queryParams.search"
          placeholder="输入关键字搜索"
          style="width: 250px; margin-left: 15px"
          clearable
          @keyup.enter="fetchDataSourceList"
          @clear="fetchDataSourceList"
        >
          <template #suffix>
            <el-icon class="el-input__icon" @click="fetchDataSourceList">
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table :data="dataSourceList" style="width: 100%" border stripe v-loading="loading">
        <el-table-column prop="id" type="index" width="80" />
        <el-table-column prop="name" label="数据源名称" min-width="120" />
        <el-table-column prop="type" label="数据库类型" width="120">
          <template #default="scope">
            <el-tag :type="getDbTypeTagType(scope.row.type)">
              {{ getDbTypeLabel(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="连接信息" min-width="280">
          <template #default="scope">
            <div class="connection-info">
              <div>
                <span class="info-label">主机：</span>
                <span>{{ scope.row.host }}</span>
              </div>
              <div>
                <span class="info-label">端口：</span>
                <span>{{ scope.row.port }}</span>
              </div>
              <div>
                <span class="info-label">数据库：</span>
                <span>{{ scope.row.database }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="connection_status" label="连接状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.connection_status === 'connected' ? 'success' : 'danger'">
              {{ scope.row.connection_status === 'connected' ? '已连接' : '未连接' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column prop="updated_at" label="更新时间" width="180" />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <div class="action-container">
              <el-tooltip content="编辑" placement="top">
                <el-button
                  class="action-button"
                  type="primary"
                  circle
                  size="small"
                  @click="handleEdit(scope.row)"
                >
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="测试连接" placement="top">
                <el-button
                  class="action-button"
                  type="success"
                  circle
                  size="small"
                  :loading="testingSource === scope.row.id"
                  @click="handleTest(scope.row)"
                >
                  <el-icon><Connection /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="查看表结构" placement="top">
                <el-button
                  class="action-button"
                  type="info"
                  circle
                  size="small"
                  @click="handleViewStructure(scope.row)"
                >
                  <el-icon><List /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  class="action-button"
                  type="danger"
                  circle
                  size="small"
                  @click="handleDelete(scope.row)"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 数据源表单对话框 -->
    <el-dialog
      :title="formData.isAdd ? '新增数据源' : '编辑数据源'"
      v-model="dialogVisible"
      width="650px"
         :modal="true"
    :append-to-body="true"
    :lock-scroll="true"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        :disabled="formLoading"
      >
        <el-divider content-position="left">基本信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="数据源名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入数据源名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="数据库类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择数据库类型" style="width: 100%">
                <el-option
                  v-for="item in dbTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                :rows="2"
                placeholder="请输入数据源描述"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">连接信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主机" prop="host">
              <el-input v-model="formData.host" placeholder="请输入主机地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input-number
                v-model="formData.port"
                :min="1"
                :max="65535"
                style="width: 100%"
                placeholder="请输入端口号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="数据库" prop="database">
              <el-input v-model="formData.database" placeholder="请输入数据库名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="formData.password"
                type="password"
                placeholder="请输入密码"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="SSL连接" prop="enable_ssl">
              <el-switch v-model="formData.enable_ssl" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="formLoading">确认</el-button>
          <el-button type="success" @click="testConnection" :loading="testingConnection"
            >测试连接</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 表结构对话框 -->
    <el-dialog title="数据库表结构" v-model="structureDialogVisible" width="80%"    :modal="true"
    :append-to-body="true"
    :lock-scroll="true" destroy-on-close>
      <div v-loading="structureLoading">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="表" name="table">
            <el-select
              v-model="selectedTable"
              @change="handleTableChange"
              placeholder="请选择表"
              style="width: 250px; margin-bottom: 15px"
            >
              <el-option
                v-for="table in tableList"
                :key="table.name"
                :label="table.name"
                :value="table.name"
              />
            </el-select>
            <el-table v-if="selectedTable" :data="columnList" border stripe>
              <el-table-column prop="name" label="列名" width="180" />
              <el-table-column prop="data_type" label="数据类型" width="150" />
              <el-table-column prop="is_nullable" label="允许空值" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.is_nullable ? 'info' : 'danger'" size="small">
                    {{ scope.row.is_nullable ? '是' : '否' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="is_primary_key" label="主键" width="80">
                <template #default="scope">
                  <el-tag v-if="scope.row.is_primary_key" type="primary" size="small">是</el-tag>
                  <span v-else>否</span>
                </template>
              </el-table-column>
              <el-table-column prop="default" label="默认值" width="150" />
              <el-table-column prop="description" label="描述" />
              <!-- <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                  <el-button type="primary" link size="small" @click="viewColumnStats(scope.row)">
                    <el-icon><DataAnalysis /></el-icon> 统计信息
                  </el-button>
                </template>
              </el-table-column> -->
            </el-table>
            <div v-else class="empty-data">请选择一个表查看列信息</div>
          </el-tab-pane>
          <el-tab-pane label="视图" name="view">
            <el-select
              v-model="selectedView"
              @change="handleViewChange"
              placeholder="请选择视图"
              style="width: 250px; margin-bottom: 15px"
            >
              <el-option
                v-for="view in viewList"
                :key="view.name"
                :label="view.name"
                :value="view.name"
              />
            </el-select>
            <el-table v-if="selectedView" :data="viewColumnList" border stripe>
              <el-table-column prop="name" label="列名" width="180" />
              <el-table-column prop="type" label="数据类型" width="150" />
              <el-table-column prop="nullable" label="允许空值" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.nullable ? 'info' : 'danger'" size="small">
                    {{ scope.row.nullable ? '是' : '否' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="描述" />
            </el-table>
            <div v-else class="empty-data">请选择一个视图查看列信息</div>
          </el-tab-pane>
          <el-tab-pane label="样本数据" name="sample">
            <div class="sample-header">
              <el-select
                v-model="sampleTable"
                @change="fetchSampleData"
                placeholder="请选择表"
                style="width: 250px"
              >
                <el-option
                  v-for="table in tableList"
                  :key="table.name"
                  :label="table.name"
                  :value="table.name"
                />
              </el-select>
              <el-input-number
                v-model="sampleLimit"
                :min="1"
                :max="100"
                @change="fetchSampleData"
                style="width: 150px; margin-left: 15px"
              />
            </div>
            <el-table v-if="sampleData.length" :data="sampleData" border stripe max-height="500">
              <el-table-column
                v-for="column in sampleColumns"
                :key="column"
                :prop="column"
                :label="column"
                :min-width="120"
              />
            </el-table>
            <div v-else class="empty-data">请选择一个表查看样本数据</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 列统计信息对话框 -->
    <el-dialog
      :title="`${currentColumn ? currentColumn.name : ''} 统计信息`"
      v-model="statsDialogVisible"
      width="500px"
         :modal="true"
    :append-to-body="true"
    :lock-scroll="true"
      destroy-on-close
    >
      <div v-loading="statsLoading">
        <el-descriptions v-if="columnStats" border direction="vertical" :column="1">
          <el-descriptions-item label="总行数">{{ columnStats.count || 0 }}</el-descriptions-item>
          <el-descriptions-item label="唯一值数">{{
            columnStats.unique_count || 0
          }}</el-descriptions-item>
          <el-descriptions-item label="空值数">{{
            columnStats.null_count || 0
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.min !== undefined" label="最小值">{{
            columnStats.min
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.max !== undefined" label="最大值">{{
            columnStats.max
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.avg !== undefined" label="平均值">{{
            columnStats.avg
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.std !== undefined" label="标准差">{{
            columnStats.std
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.median !== undefined" label="中位数">{{
            columnStats.median
          }}</el-descriptions-item>
          <el-descriptions-item v-if="columnStats.most_common" label="最常见值">
            <div v-for="(item, index) in columnStats.most_common.slice(0, 5)" :key="index">
              {{ item.value }}: {{ item.count }}次
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div v-else class="empty-data">无法获取此列的统计信息</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Plus, Edit, Delete, Connection, List, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getDataSourceList,
  createDataSource,
  getDataSourceDetail,
  updateDataSource,
  deleteDataSource,
  testDataSourceConnection,
  getDataSourceObjects,
  getTableColumns,
  getTableSampleData,
} from '@/api/datasource'

// 定义组件名
defineOptions({
  name: 'DataSourcePage',
})

// 数据库类型选项
const dbTypeOptions = [
  { label: 'MySQL', value: 'mysql' },
  { label: 'PostgreSQL', value: 'postgresql' },
  { label: 'SQL Server', value: 'sqlserver' },
  { label: 'Oracle', value: 'oracle' },
]

// 数据库类型默认端口映射
const dbTypeDefaultPorts = {
  mysql: 3306,
  postgresql: 5432,
  sqlite: '', // SQLite是文件数据库，不使用网络端口
  sqlserver: 1433,
  oracle: 1521,
}

// 获取数据库类型标签
const getDbTypeLabel = (type) => {
  const option = dbTypeOptions.find((item) => item.value === type)
  return option ? option.label : type
}

// 获取数据库类型标签样式
const getDbTypeTagType = (type) => {
  const typeMap = {
    mysql: 'primary',
    postgresql: 'success',
    sqlite: 'info',
    sqlserver: 'warning',
    oracle: 'danger',
  }
  return typeMap[type] || 'info'
}

// 状态
const dataSourceList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const formRef = ref(null)
const formLoading = ref(false)
const testingConnection = ref(false)
const testingSource = ref(null)

// 查询参数
const queryParams = reactive({
  search: '',
  skip: 0,
  limit: 10,
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})

// 表单数据
const formData = reactive({
  id: null,
  name: '',
  description: '',
  type: '',
  host: '',
  port: '',
  database: '',
  username: '',
  password: '',
  enable_ssl: false,
  isAdd: true,
})

// 在formData声明之后添加watch函数
// 监听数据库类型变化，自动设置默认端口
watch(
  () => formData.type,
  (newType) => {
    if (newType && dbTypeDefaultPorts[newType] !== undefined) {
      formData.port = dbTypeDefaultPorts[newType]
    }
  },
)

// 表单校验规则
const formRules = {
  name: [
    { required: true, message: '请输入数据源名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符之间', trigger: 'blur' },
  ],
  type: [{ required: true, message: '请选择数据库类型', trigger: 'change' }],
  host: [{ required: true, message: '请输入主机地址', trigger: 'blur' }],
  port: [
    { required: true, message: '请输入端口号', trigger: 'blur' },
    { type: 'number', message: '端口号必须是数字', trigger: 'blur' },
  ],
  database: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
}

// 表结构相关
const structureDialogVisible = ref(false)
const structureLoading = ref(false)
const activeTab = ref('table')
const currentDataSource = ref(null)
const tableList = ref([])
const viewList = ref([])
const selectedTable = ref('')
const selectedView = ref('')
const columnList = ref([])
const viewColumnList = ref([])
const sampleTable = ref('')
const sampleLimit = ref(10)
const sampleData = ref([])
const sampleColumns = ref([])

// 列统计信息相关
const statsDialogVisible = ref(false)
const statsLoading = ref(false)
const currentColumn = ref(null)
const columnStats = ref(null)

// 获取数据源列表
const fetchDataSourceList = async () => {
  loading.value = true
  try {
    // 构建请求参数
    const params = {
      skip: (pagination.currentPage - 1) * pagination.pageSize,
      limit: pagination.pageSize,
      search: queryParams.search,
    }

    const res = await getDataSourceList(params)

    if (res && res.items) {
      dataSourceList.value = res.items
      pagination.total = res.total || res.items.length
    } else {
      dataSourceList.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取数据源列表失败:', error)
    ElMessage.error('获取数据源列表失败: ' + (error.message || '未知错误'))
    dataSourceList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 新增数据源
const handleAdd = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    description: '',
    type: '',
    host: '',
    port: '',
    database: '',
    username: '',
    password: '',
    enable_ssl: false,
    isAdd: true,
  })
  dialogVisible.value = true
}

// 编辑数据源
const handleEdit = async (row) => {
  formLoading.value = true
  try {
    const re = await getDataSourceDetail(row.id)
    const res = re.item
    Object.assign(formData, {
      id: res.id,
      name: res.name,
      description: res.description || '',
      type: res.type,
      host: res.host,
      port: res.port,
      database: res.database,
      username: res.username,
      password: '', // 出于安全考虑，API通常不会返回密码
      enable_ssl: res.enable_ssl || false,
      isAdd: false,
    })
    dialogVisible.value = true
  } catch (error) {
    console.error('获取数据源详情失败:', error)
    ElMessage.error('获取数据源详情失败: ' + (error.message || '未知错误'))
  } finally {
    formLoading.value = false
  }
}

// 删除数据源
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除数据源 "${row.name}" 吗？此操作将无法恢复！`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        await deleteDataSource(row.id)
        ElMessage.success('删除成功')
        fetchDataSourceList()
      } catch (error) {
        console.error('删除数据源失败:', error)
        ElMessage.error('删除数据源失败: ' + (error.message || '未知错误'))
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 测试连接
const testConnection = async () => {
  if (formRef.value) {
    await formRef.value.validate(async (valid) => {
      if (!valid) return

      testingConnection.value = true
      try {
        // 对于新增的数据源，需要先创建一个临时对象
        if (formData.isAdd) {
          ElMessage.info('新数据源需要先保存才能测试连接')
          return
        }

        await testDataSourceConnection(formData.id)
        ElMessage.success('连接成功')
      } catch (error) {
        console.error('测试连接失败:', error)
        ElMessage.error('连接失败: ' + (error.message || '未知错误'))
      } finally {
        testingConnection.value = false
      }
    })
  }
}

// 测试已有数据源连接
const handleTest = async (row) => {
  testingSource.value = row.id
  try {
    await testDataSourceConnection(row.id)
    ElMessage.success('连接成功')
    // 更新连接状态
    fetchDataSourceList()
  } catch (error) {
    console.error('测试连接失败:', error)
    ElMessage.error('连接失败: ' + (error.message || '未知错误'))
  } finally {
    testingSource.value = null
  }
}

// 查看表结构
const handleViewStructure = async (row) => {
  currentDataSource.value = row
  structureDialogVisible.value = true
  structureLoading.value = true
  activeTab.value = 'table'

  try {
    // 获取表列表
    const tableRes = await getDataSourceObjects(row.id, { object_type: 'table' })
    tableList.value = tableRes.data || []

    // 获取视图列表
    const viewRes = await getDataSourceObjects(row.id, { object_type: 'view' })
    viewList.value = viewRes.data || []

    // 清空已选项
    selectedTable.value = ''
    selectedView.value = ''
    columnList.value = []
    viewColumnList.value = []
    sampleTable.value = ''
    sampleData.value = []
    sampleColumns.value = []
  } catch (error) {
    console.error('获取数据库结构失败:', error)
    ElMessage.error('获取数据库结构失败: ' + (error.message || '未知错误'))
  } finally {
    structureLoading.value = false
  }
}

// 切换表
const handleTableChange = async (tableName) => {
  if (!tableName || !currentDataSource.value) return

  structureLoading.value = true
  try {
    const res = await getTableColumns(currentDataSource.value.id, tableName)
    columnList.value = res.data || []
  } catch (error) {
    console.error('获取表结构失败:', error)
    ElMessage.error('获取表结构失败: ' + (error.message || '未知错误'))
    columnList.value = []
  } finally {
    structureLoading.value = false
  }
}

// 切换视图
const handleViewChange = async (viewName) => {
  if (!viewName || !currentDataSource.value) return

  structureLoading.value = true
  try {
    const res = await getTableColumns(currentDataSource.value.id, viewName)
    viewColumnList.value = res.data || []
  } catch (error) {
    console.error('获取视图结构失败:', error)
    ElMessage.error('获取视图结构失败: ' + (error.message || '未知错误'))
    viewColumnList.value = []
  } finally {
    structureLoading.value = false
  }
}

// 获取样本数据
const fetchSampleData = async () => {
  if (!sampleTable.value || !currentDataSource.value) return

  structureLoading.value = true
  try {
    const params = { limit: sampleLimit.value }
    const res = await getTableSampleData(currentDataSource.value.id, sampleTable.value, params)

    if (res && res.data.rows && Array.isArray(res.data.rows)) {
      sampleData.value = res.data.rows
      // 从第一条记录获取列名
      if (res.data.rows.length > 0) {
        sampleColumns.value = Object.keys(res.data.rows[0])
      } else {
        sampleColumns.value = []
      }
    } else {
      sampleData.value = []
      sampleColumns.value = []
    }
  } catch (error) {
    console.error('获取样本数据失败:', error)
    ElMessage.error('获取样本数据失败: ' + (error.message || '未知错误'))
    sampleData.value = []
    sampleColumns.value = []
  } finally {
    structureLoading.value = false
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (!valid) return

    formLoading.value = true
    try {
      const data = {
        name: formData.name,
        description: formData.description,
        type: formData.type,
        host: formData.host,
        port: formData.port,
        database: formData.database,
        username: formData.username,
        enable_ssl: formData.enable_ssl,
      }

      // 只有填写了密码才会更新密码字段
      if (formData.password) {
        data.password = formData.password
      }

      if (formData.isAdd) {
        // 新增时密码必填
        if (!formData.password) {
          ElMessage.warning('请输入密码')
          formLoading.value = false
          return
        }

        await createDataSource(data)
        ElMessage.success('创建成功')
      } else {
        await updateDataSource(formData.id, data)
        ElMessage.success('更新成功')
      }

      dialogVisible.value = false
      fetchDataSourceList()
    } catch (error) {
      console.error(formData.isAdd ? '创建数据源失败:' : '更新数据源失败:', error)
      ElMessage.error((formData.isAdd ? '创建' : '更新') + '失败: ' + (error.message || '未知错误'))
    } finally {
      formLoading.value = false
    }
  })
}

// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchDataSourceList()
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchDataSourceList()
}

// 初始化
onMounted(() => {
  fetchDataSourceList()
})
</script>

<style scoped>
.common-container {
  padding: 20px;
  height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
}

.operation-card {
  margin-bottom: 20px;
}

.operation-buttons {
  display: flex;
  align-items: center;
}

.table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.el-table) {
  flex: 1;
  overflow: auto;
}

.connection-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
  color: #606266;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.action-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.action-button {
  font-size: 12px;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sample-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.empty-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #909399;
  font-size: 14px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>
